<!-- <ion-header>
  <ion-navbar>
    <ion-title>首页</ion-title>
  </ion-navbar>
</ion-header> -->
<!-- [(ngModel)]="myInput" (ionInput)="getItems($event)" -->
<ion-content>
  <div class="page_content">
      <ion-searchbar placeholder="请输入相关商品">
      </ion-searchbar>
  </div>

<!-- 轮播图-->
  <ion-slides pager class="page_silde" autoplay=3000 loop=true >
    <ion-slide >
      <img src="assets/imgs/slide01.png">
    </ion-slide>

    <ion-slide >
      <img src="assets/imgs/slide02.png">
    </ion-slide>

    <ion-slide>
      <img src="assets/imgs/slide03.jpg">
    </ion-slide>
  </ion-slides>

  <!-- 精品推荐 -->
  <div class="tuiJian">
      <div class="text">精品推荐</div>
  </div>
  
  <div class="product_slide">
      <ion-scroll scrollX=true>
          <ul class="cleafix" [ngStyle]="{'width':widthLength}">
              <li *ngFor="let item of items">
                <img src="{{item.pic}}" >
                <p>{{item.title}}</p>
              </li>
          </ul>
      </ion-scroll>
  </div>

    <!-- 猜你喜欢 -->
  <div class='love'>
    <div class="text">猜你喜欢</div>
  </div>
<!-- 喜欢的产品 -->
  <div class="love_pro">
      <ion-grid>
          <ion-row>
              <ion-col col-6 *ngFor="let item of items">
                  <img src="{{item.pic}}" >
                  <p>{{item.title}}</p>
              </ion-col>
            </ion-row>
      </ion-grid>
  </div>
</ion-content>
